const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");

function drawDashedLine(context, x1, y1, x2, y2, dashedLength = 5) {
    /*
     const deltaX = Math.abs(x1 - x2);
     const deltaY = Math.abs(y1 - y2);

     const numDashes = Math.floor(
         Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)) / dashedLength
     );

     for (let i = 0; i < numDashes; i++) {
         context[i % 2 === 0 ? "moveTo" : "lineTo"](
             x1 + (deltaX / numDashes) * i,
             y1 + (deltaY / numDashes) * i
         );
         context.stroke();
     }*/

    context.beginPath();
    context.setLineDash([dashedLength]);
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
}

context.lineWidth = 0.5;
context.strokeStyle = "blue";

drawDashedLine(context, 20, 20, context.canvas.width - 20, 20);
drawDashedLine(
    context,
    context.canvas.width - 20,
    20,
    context.canvas.width - 20,
    context.canvas.height - 20,
    10
);
